<template>
  <view class="ski-detail">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="ski-detail-content" :style="[{'top': top + 'px'}]">
      <view class="sd-swiper">
        <view class="swiper-box">
          <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval=3000>
            <swiper-item class="index-swiper-item" v-for="(item,index) in swiperList" :key="index">
              <image class="i-image" :src="item"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="sd-store-detail">
        <!-- 标题 -->
        <view class="ssd-title">
          北大湖滑雪度假区——A1雪道
        </view>
        <!-- 级别和角度 -->
        <view class="ssd-grade-rotate">
          <view class="ssd-grade">
            {{trailDetailInfo.level ==1 ? '初级雪道' : (trailDetailInfo.level == 2 ? '中级雪道' : '高级雪道')}}
          </view>
          <view class="ssd-rotate" v-if="trailDetailInfo.minDegree&&trailDetailInfo.maxDegree">
            坡度{{trailDetailInfo.minDegree}}~{{trailDetailInfo.maxDegree}}°
          </view>
        </view>
        <!-- 分割线 -->
        <view class="ssd-line">

        </view>
        <!-- 雪道服务 -->
        <view class="ssd-service">
          <view class="ssd-little-title">
            雪道服务
          </view>
          <view class="ssd-content">
            {{trailDetailInfo.service ? trailDetailInfo.service: '-'}}
          </view>
        </view>
        <!-- 分割线 -->
        <view class="ssd-line">

        </view>
        <!-- 雪道介绍 -->
        <view class="ssd-intro">
          <view class="ssd-little-title">
            雪道介绍
          </view>
          <view class="ssd-content">
            <rich-text class="ql-editor" :nodes="replaceContent(trailDetailInfo.introduction)"
              v-if="trailDetailInfo.introduction"></rich-text>
            <view class="" v-else> 暂无 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

        trailId: '',
        top: 0, //距离顶部距离
        trailDetailInfo: {}, //商家基础信息
        childTitle: '雪道详情', //标题
        swiperList: [], //轮播图数据
      }
    },
    onLoad(options) {

      if (options.trailId) {
        this.trailId = options.trailId
      }
      this.getTrailDetail()
    },
    methods: {
      // 富文本添加列表边框样式
      replaceContent(content) {
        // console.log(content)
        if (content) {
          content = content.replace(/\<img/gi, '<img class="imgColor" ') //正则替换
          return content;
        } else {
          return null;
        }
      },
      // 获取商家数据
      getTrailDetail() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getTrailDetail + this.trailId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.trailDetailInfo = res.data.data
              _this.getSwiperList()
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 获取轮播图数据
      getSwiperList() {
        let _this = this
        if (_this.trailDetailInfo.photo) {
          _this.swiperList = _this.trailDetailInfo.photo.split(',')
        }
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
  .imgColor {
    max-width: 100%;
    height: auto;
  }
</style>
<style lang="scss">

  .ski-detail-content {
    position: absolute;
    padding: 0 30rpx;

    // 头部轮播图
    .sd-swiper {

      // 轮播图
      .swiper-box {
        margin-top: 10rpx;
        width: 100%;

        .uni-swiper-wrapper {
          width: 690rpx;
          height: 340rpx;

          /deep/ .wx-swiper-dot {
            // 指示点元素默认样式
            width: 16rpx !important;
            height: 16rpx !important;
            background: #64787B !important;
            border-radius: 50%;

          }

          /deep/ .wx-swiper-dot-active {
            // 指示点元素激活（当前选中）状态样式
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            width: 63rpx !important;
            height: 16rpx !important;
            background-color: #303030 !important;
          }

          .index-swiper-item {
            border-radius: 20rpx;

            .i-image {
              width: 100%;
              height: 100%;
            }
          }
        }


      }
    }

    .sd-store-detail {
      width: 690rpx;
      min-height: calc(100vh - 540rpx);
      margin-top: 20rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 30rpx 20rpx;

      .ssd-title {
        font-size: 40rpx;
        font-weight: 500;
        color: #303030;
      }

      .ssd-grade-rotate {
        display: flex;
        margin-top: 30rpx;

        .ssd-grade {
          background: #EFF1F4;
          font-size: 20rpx;
          color: #5D87ED;
          border-radius: 18rpx;
          padding: 5rpx 15rpx;
        }

        .ssd-rotate {
          margin-left: 20rpx;
          font-size: 20rpx;
          border-radius: 18rpx;
          background: #EFF1F4;
          color: #91A4B2;
          padding: 5rpx 15rpx;
        }
      }

      .ssd-line {
        margin-top: 25rpx;
        width: 650rpx;
        height: 2rpx;
        background-color: rgba(145, 164, 178, 0.3);
      }

      .ssd-little-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #303030;
      }

      .ssd-content {
        margin-top: 20rpx;
      }

      .ssd-service {
        margin-top: 30rpx;
      }

      .ssd-intro {
        margin-top: 30rpx;
      }
    }
  }
</style>